<template>
  <el-dialog center :title="title" :visible.sync="innerVisible">
    <el-row>
      <el-col :span="24">
        <Upload class="pull-left" name="file" :formData="{fileType: fileType}" @file="setFile" :url="url"
                :acceptFileTypes="/(\.|\/)(xls?x)$/i">
          <el-button size="small" type="primary">添加文件</el-button>
        </Upload>
        <el-button type="danger" size="small" @click.prevent="del" style="margin: 0 10px;">移除</el-button>
        <a class="font-light-blue font-blue" :href="downLoadUrl">下载模板</a>
        <div class="clearfix"></div>
        <slot name="tips">
          <!--<div class="col-xs-12 m--margin-top-10">
            <div class="alert alert-danger show text-center">
              由于上传文件转换为订单需要时间处理，上传后文件处理情况请在处理结果中查看，文件处理成功后订单将进入暂存单列表。
            </div>
          </div>-->
        </slot>
      </el-col>
      <el-col :span="24">
        <el-table
          border
          ref="elTable"
          max-height="300"
          :data="files"
          @selection-change="selectionChange"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="files.0.name"
            label="文件名">
          </el-table-column>
          <el-table-column
            prop="files.0.size"
            label="文件大小">
            <template slot-scope="scope">
              {{ scope.row['files'][0]['size'] / 1024 | decimalNumFilter }}k
            </template>
          </el-table-column>
          <el-table-column
            prop="process"
            label="上传进度">
            <template slot-scope="scope">
              <span class="text-danger" v-if="scope.row['errorMessage']">{{ scope.row['errorMessage'] }}</span>
              <span v-else>
                {{ (parseInt(scope.row['progress']().loaded / scope.row['progress']().total * 100, 10) - waitNumber) | NaNToZero
                }} %
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click.prevent="submit" type="primary" :loading="loading">确认上传</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Upload from '@/components/Upload/Upload'
import {decimalNumFilter} from '@/filters'
import {confirm} from '@/utils'

export default {
  components: {
    Upload
  },
  filters: {
    decimalNumFilter,
    NaNToZero(val) {
      if (isNaN(val)) {
        val = 0
      }
      if (val < 0) {
        val = 0
      }
      return val
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '导入excel'
    },
    url: {
      type: String,
      default: '/zuul/ms-common-excelupload/excel/fileImport'
    },
    downLoadUrl: {
      type: String,
      default: '/zuul/ms-mongodb/file/photo/upload'
    },
    fileType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      files: [],
      checkedRow: [],
      loading: false,
      waitNumber: 10
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.files = []
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  methods: {
    setFile(file) {
      this.files.push(file)
    },
    selectionChange(rows) {
      this.checkedRow = rows
    },
    submit() {
      if (Array.isArray(this.files)) {
        this.waitNumber = 10
        this.loading = true
        let pArr = []
        this.files.forEach(v => {
          if (v.hadUpdated) {
            return
          }
          let p = v.submit().then(response => {
            v.hadUpdated = true
            if (!response.success) {
              v.errorMessage = response.error_message || '上传错误'
            } else {
              v.errorMessage = ''
            }
          })
          pArr.push(p)
        })
        Promise.all(pArr).finally(_ => {
          this.loading = false
          this.waitNumber = 0
          let message = '上传成功'
          let type = 'success'
          if (Array.isArray(this.files)) {
            this.files.forEach(v => {
              if (v.errorMessage) {
                message = v.errorMessage
                type = 'warning'
              }
            })
          }
          this.files.length > 0 && confirm(message, undefined, {type})
          this.$emit('refresh', true)
        })
      }
    },
    del() {
      this.checkedRow.forEach(v => {
        for (let k in this.files) {
          if (this.files[k] === v) {
            this.files.splice(k, 1)
          }
        }
      })
    }
  }
}
</script>
